<template>
  <div class="PhotoThreePage" :style="{ fontSize: showEdition ? '14px' : '20px' }">
    <div class="top3">
      <div class="top" v-if="AtlasData">
        <img v-if="getDataTable.suolueFileId" width="100%" :src="baseurlid + getDataTable.suolueFileId" alt />
        <img v-else width="100%" :src="baseurlid + getDataTable.fileUrl" alt />
        <img width="100%" v-if="!getDataTable.suolueFileId" src="https://nfzjszlb.jst.zj.gov.cn/tyzcpt/api/upload/oss/preview?fileId=3e7acb97b640411a9ce06017e7c12964" alt="" />
        <p class="top1" style="font-size: 16px; font-weight: 800; color: #000">
          {{ AtlasData.atlasName }}
        </p>
        <p class="top1">NO 编号：{{ AtlasData.id }}</p>
        <div class="topBottom">
          <div class="left">
            <p style="font-size: 14px; font-weight: 800; color: #000">
              {{ AtlasData.atlasStyle }}
            </p>
            <p>风格</p>
          </div>
          <div class="middle1">
            <p style="font-size: 14px; font-weight: 800; color: #000">{{ AtlasData.floors }}层</p>
            <p>楼层</p>
          </div>
          <div class="right">
            <p style="font-size: 14px; font-weight: 800; color: #000">{{ (AtlasData.buildArea)}}㎡</p>
            <p>面积</p>
          </div>
        </div>
        <div class="topBottom">
          <div class="left">
            <p style="font-size: 14px; font-weight: 800; color: #000">
              {{ AtlasData.belongArea || '暂无数据' }}
            </p>
            <p>所属区域</p>
          </div>
          <div class="middle1">
            <p style="font-size: 14px; font-weight: 800; color: #000">{{ AtlasData.useNumber ? AtlasData.useNumber : 0 }}次</p>
            <p>使用量</p>
          </div>
          <div class="right">
            <p style="font-size: 14px; font-weight: 800; color: #000">{{ AtlasData.praiseNum ? AtlasData.praiseNum : 0 }}次</p>
            <p>点赞量</p>
          </div>
        </div>
      </div>
      <div class="middle"></div>
      <div class="bottom">
        <span style="border-right: 4px solid blue; margin-right: 10px"></span>
        <span style="font-size: 16px; font-weight: 800; color: #000">图集详情</span
        ><span style="position: relative; left: 236px; top: -2px"><van-button type="primary" size="small" @click="handleG0toPDF(getDataTable)">预览pdf</van-button></span>
        <div style="padding: 4px 0" v-for="(item, index) in imageList" :key="index">
          <img v-if="getDataTable.suolueFileId" width="100%" :src="baseurlid + getDataTable.suolueFileId" alt />
          <img v-else width="100%" :src="baseurlid + getDataTable.suolueFileId" alt />
          <img width="100%" v-if="!getDataTable.suolueFileId" src="https://nfzjszlb.jst.zj.gov.cn/tyzcpt/api/upload/oss/preview?fileId=3e7acb97b640411a9ce06017e7c12964" alt="" />
          <!-- <pdf
              :src="baseurl + pdfData + '?download=0'"
              style="width: 100%; height: 100%"
            ></pdf> -->
          <!-- <iframe v-show="pdfids" class="manual__iframe" :src="'static/web/viewer.html?file=' + encodeURI('https://nfzjszlb.jst.zj.gov.cn/api/upload/oss/preview?fileId='+pdfids)" frameborder="0"></iframe> -->
        </div>
      </div>
    </div>
    <div class="bottom1" v-if="showBut" :style="{ fontSize: showEdition ? '14px' : '20px' }">
      <div class="ThreeStyle">
        <div @click="follow" class="left">
          <img style="margin-left: 7px" v-if="!isFollow" width="30" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/GJFW/20.png" />
          <img style="margin-left: 7px" v-if="isFollow" width="30" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/GJFW/21.png" />
          <p style="text-align: center; font-size: 14px !important" :style="{ fontSize: showEdition ? '14px' : '20px' }">收藏</p>
        </div>
        <div class="btn" style="float: left; width: 80%">
          <ul>
            <li v-for="(item, index) in btnData" :key="index" :style="{ background: item.color }" @click="btnDataClick(item)">
              <div style="text-align: center">
                <p>
                  <img :src="item.icon" style="width: 13%" />
                  <span>{{ item.name }}</span>
                </p>
                <p style="font-size: 14px">{{ item.content }}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Atlas, followSave, followDelete, AtlasThumbsUp, thumbsUpSave, thumbsUpDelete, AtlasCollection, loginJGPT, selectListByIds } from '../../utils/api'
// import pdf from "vue-pdf";
export default {
  data() {
    return {
      isFollow: false,
      showBut: true,
      isThumbsUp: false,
      showEdition: false,
      pdfids: '',
      getDataTable: '',
      pdfData: '',
      baseurl: window.g.BaseURL4,
      baseurlid: window.g.OSSPriviewId,
      baseUrl1: window.g.OSSPriview1,
      btnData: [
        {
          name: '为TA点赞',
          color: '#3F8FFC',
          content: '来为图集点个赞吧',
          icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/GJFW/22.png'
        }
        // {
        //   name: '确定',
        //   color: '#00B578',
        //   content: '',
        //   //                  icon:'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/GJFW/24.png'
        // }
      ],
      imageList: [
        {
          img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/banner.png'
        }
        // { img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/banner.png' },
        // { img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/banner.png' },
        // { img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/banner.png' },
        // { img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/banner.png' },
        // { img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/banner.png' },
        // { img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/banner.png' },
      ],
      AtlasData: ''
    }
  },
  components: {
    // pdf,
  },
  methods: {
    btnDataClick: async function (item) {
      switch (item.name) {
        case '确定':
          this.$store.commit('getJFTZ', this.AtlasData)
          window.localStorage.setItem('ISTUJI', false)
          if (JSON.parse(window.sessionStorage.getItem('fileData'))?.S) {
            window.sessionStorage.setItem('addGJ',0)
            this.$router.push({
              path: 'fileData'
            })
          } else {
            this.$router.push({
              path: 'ChooseCraftsman'
            })
          }
          break
        case '为TA点赞':
          this.handleDianzan()
          break
        case '取消点赞':
          this.handleDianzan()
          break
      }
    },
    //监管平台登录
    login: async function () {
      // let params = {
      //   username: "admin",
      //   password: "fxg+kwEniSKO/DvG08OPew==",
      // };
      // const res = await loginJGPT(params);
      this.token = window.localStorage.getItem('token')
      this.getData()
      // if(res.data.code == 200){

      // }
    },
    handleDianzan: async function () {
      if (this.isThumbsUp) {
        let params = {
          accessCode: '29ff26f660fc47f79c15bff382eeca6d',

          id: this.AtlasData.id,
          appKey: '6738b790-69e8-11ec-a673-6805cab640a0',
          userId: window.localStorage.getItem('ISZHUCE')
        }
        const res = await thumbsUpDelete(params)
        if (res.data.code == 200) {
          this.isThumbsUp = !this.isThumbsUp
          this.btnData[0].name = '为TA点赞'
          this.btnData[0].content = '来为图集点个赞吧'
          this.AtlasData.praiseNum = Number(this.AtlasData.praiseNum)
          this.AtlasData.praiseNum -= 1
          this.$toast.success('点赞量-1')
        } else {
          this.$toast.fail('已取消！')
        }
      } else {
        let params = {
          accessCode: '29ff26f660fc47f79c15bff382eeca6d',
          id: this.AtlasData.id,
          appKey: '6738b790-69e8-11ec-a673-6805cab640a0',
          userId: window.localStorage.getItem('ISZHUCE')
        }
        const res = await thumbsUpSave(params)
        if (res.data.code == 200) {
          this.isThumbsUp = !this.isThumbsUp
          this.AtlasData.praiseNum = Number(this.AtlasData.praiseNum)
          this.AtlasData.praiseNum += 1
          this.btnData[0].name = '取消点赞'
          this.btnData[0].content = ''
          this.$toast.success('点赞量+1')
        } else {
          this.$toast.fail('已点赞！')
        }
      }
    },
    async handleG0toPDF(item) {
      let url = ''
      debugger
      if (item.atlasFile.pdfIds) {
        //根据id获取
        // const res = await selectListByIds(item.fileId)
        let url1 = ''
        const res = await selectListByIds(item.atlasFile.pdfIds)
        url1 = this.baseUrl1 + res.data.data[0].path
        // //iphone先这样处理
        // if (ZWJSBridge) {
        //   ZWJSBridge.openLink({
        //     url: url1,
        //   })
        //     .then((res) => { })
        //     .catch((err) => {
        //       window.open(url1)
        //     })
        // }
      } else {
        this.$toast.fail('暂无附件！')
        return
      }
      //跳转至view需要用户手动复制预览1
      //微信小程序需要端内打开
      if (window.sessionStorage.getItem('showBg1') == 'true') {
        this.$router.push({
          path: '/PDFJSViewer',
          query: {
            path: url
          }
        })
      } else {
        //根据id获取
        let url1 = ''
        const res = await selectListByIds(item.atlasFile.pdfIds)
        url1 = this.baseUrl1 + res.data.data[0].path
        //iphone先这样处理
        if (ZWJSBridge) {
          ZWJSBridge.openLink({
            url: url1
          })
            .then((res) => {})
            .catch((err) => {
              window.open(url1)
            })
        }
      }
    },
    //详情
    getData: async function () {
      let params = {
        accessCode: '29ff26f660fc47f79c15bff382eeca6d',
        cityCode: '441300000000',
        id: this.$route.query?.data ? JSON.parse(this.$route.query.data).id : JSON.parse(this.$route.query.data1).atlasId
      }
      const res = await Atlas(params)
      this.AtlasData = res.data.data
      //获取多图上传的图片路径
      // const res1 = await selectListByIds(this.AtlasData.atlasFile.fileIds)
      this.pdfData = res.data.data.pdfUrl
      // let newData = [res.data.data.atlasFile.atlasId,res.data.data.atlasFile.dwgIds,res.data.data.atlasFile.fileIds,res.data.data.atlasFile.pdfIds]

      //根据ids请求图片的路径
      //先获取gsa token
      this.getSCTJ()
      this.getDZTJ()
      // this.getUrlData(res.data.data.atlasFile.atlasId)
      // this.getUrlData(res.data.data.atlasFile.dwgIds)
      // this.getUrlData(res.data.data.atlasFile.fileIds)
      try {
        this.pdfids = res.data.data.atlasFile.pdfIds
      } catch (err) {
        console.log(err)
      }
      //      this.$store.commit('getJFTZ',arr)
    },
    //根据ids请求图片的路径
    getUrlData: async function (data) {
      let url = window.g.BaseURL + 'api/upload/selectListByIds?id=' + data
      let me = this
      $.ajax({
        url: url,
        type: 'get',
        dataType: 'json',
        processData: false,
        contentType: false,
        cache: false,
        async: true,
        beforeSend: function (XMLHttpRequest) {
          XMLHttpRequest.setRequestHeader('Authorization', me.token)
        },
        success: function (result) {
          // loading.close();
          if (result.code == 200) {
            debugger
            this.pdfids = result.data[0].fileId
            console.log(this.pdfids)
          } else {
            me.$toast.fail(result.msg)
          }
        },
        error: function (error) {
          // loading.close();
        }
      })
    },
    getSCTJ: async function (data) {
      let params = {
        accessCode: '29ff26f660fc47f79c15bff382eeca6d',
        appKey: '6738b790-69e8-11ec-a673-6805cab640a0',
        userId: window.localStorage.getItem('ISZHUCE'),
        atlasId: this.AtlasData.id,
        pageNo: 1,
        pageSize: 1000
      }
      const res = await AtlasCollection(params)
      res.data.data.pageList && res.data.data.pageList.length > 0 ? (this.isFollow = true) : (this.isFollow = false)
    },
    getDZTJ: async function (data) {
      let params = {
        accessCode: '6d042fedd4b445769f41673c99511f6f',
        appKey: '6738b790-69e8-11ec-a673-6805cab640a0',
        userId: window.localStorage.getItem('ISZHUCE'),
        id: this.AtlasData.id,
        pageNo: 1,
        pageSize: 1000
      }
      const res = await AtlasThumbsUp(params)
      if (res.data.code == 200) {
        this.isThumbsUp = res.data.data
        if (this.isThumbsUp) {
          // alert(1)
          this.btnData[0].name = '取消点赞'
          this.btnData[0].content = ''
        } else {
          this.btnData[0].name = '为TA点赞'
          this.btnData[0].content = '来为图集点个赞吧'
        }
      }
    },
    follow: async function () {
      if (!this.isFollow) {
        let params = {
          accessCode: '29ff26f660fc47f79c15bff382eeca6d',
          appKey: '6738b790-69e8-11ec-a673-6805cab640a0',
          atlasId: this.AtlasData.id,
          // appKey: "6738b790-69e8-11ec-a673-6805cab640a0",
          userId: window.localStorage.getItem('ISZHUCE')
        }
        const res = await followSave(params)
        if (res.data.data) {
          this.isFollow = !this.isFollow
          this.$toast.success('收藏成功！')
        } else {
          this.$toast.fail('收藏失败！')
        }
      } else {
        let params = {
          accessCode: '29ff26f660fc47f79c15bff382eeca6d',
          id: this.AtlasData.id,
          appKey: '6738b790-69e8-11ec-a673-6805cab640a0',
          userId: window.localStorage.getItem('ISZHUCE')
        }
        const res = await followDelete(params)
        if (res.data.data) {
          this.isFollow = !this.isFollow
          this.$toast.success('取消收藏成功！')
        } else {
          this.$toast.fail('取消收藏失败！')
        }
      }
    }
  },
  mounted: async function () {
    this.getSCTJ()
    this.showEdition = this.$store.state.Edition
    this.showBut = true
    if (this.$route.query.data != undefined) {
      this.login()
      this.getDataTable = JSON.parse(this.$route.query.data)
    } else {
      this.login()
      this.getDataTable = JSON.parse(this.$route.query.data1)
    }
    if (this.$route.query.id) {
      this.btnData.push({
        name: '确定',
        color: '#00B578',
        content: ''
        //                  icon:'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/GJFW/24.png'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.PhotoThreePage {
  height: 100vh;
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  background: #fff;
  font-size: 14px;

  .manual__iframe {
    background-color: #fff !important;
    display: flex;
    flex-direction: column;
    margin-top: 4px;
    height: 50vh;
    width: 97vw;
  }

  .top3 {
    height: 90%;
    overflow: hidden;
    overflow: auto;

    .top {
      .top1 {
        padding: 10px 20px;
      }

      .topBottom {
        display: flex;
        justify-content: space-between;
        margin: 0 10px;
        border-bottom: 1px solid #eee;
        height: 60px;

        .left {
          width: 33.3%;
          margin: 10px 0;
          border-right: 1px solid #eee;

          p {
            text-align: center;
            line-height: 20px;
          }
        }

        .middle1 {
          width: 33.3%;
          margin: 10px 0;
          border-right: 1px solid #eee;

          p {
            text-align: center;
            line-height: 20px;
          }
        }

        .right {
          width: 33.3%;

          p {
            text-align: center;
            line-height: 20px;
          }

          margin: 10px 0;
        }
      }
    }

    .middle {
      width: 100%;
      height: 14px;
      background: #eee;
    }

    .bottom {
      padding: 20px 6px 10px 6px;
    }
  }

  .btn ul {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .btn ul li {
    width: 42%;
    background: #3f8ffc;
    border-radius: 6px;
    float: left;
    height: 42px;
    margin-left: 3.3%;
    text-align: center;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 5px 0;
  }

  .bottom1 {
    height: 8%;
    padding: 10px;
    z-index: 99999;

    .ThreeStyle {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        width: 12%;
      }

      .middle {
        background: cornflowerblue;
        margin: 0px 10px;
        width: 45%;
        text-align: center;
        border-radius: 4px;
        color: #fff;
        padding-bottom: 4px;
      }

      .right {
        background: green;
        margin: 0px 10px;
        width: 45%;
        text-align: center;
        border-radius: 4px;
        color: #fff;
        padding-top: 10px;
      }
    }
  }
}
</style>
